<html>
<title>lifetime</title>

<head>
    <script src="./js/vue.js"></script>
    <script>
        window.onload = function () {
            let vm1 = new Vue({
                el: '.container',
                data: {
                    msg: "这是旧数据"
                },
                methods: {
                    destory(){
                        //this.$destroy();
                        vm1.$destroy();
                    }
                },
                fiiters: {

                },
                beforeCreate() {
                    alert("实例还未创建完成。");
                },
                created() {
                    alert("实例已经创建完成，并且已经进行数据观测和事件配置。");
                },
                beforeMounted() {
                    alert("模板编译之前，还未挂载");
                },
                mounted() {
                    alert("模板编译之后，已经挂载，此时才会渲染页面，才会看到页面上数据的显示");
                },
                beforeUpdate(){
                    alert("组件更新之前");
                },
                updated(){
                    alert("组件更新之后");
                },
                beforeDestroy(){
                    alert("Vue实例销毁之前");
                },
                destroyed(){
                    alert("Vue实例销毁之后");
                }
            })
        }
    </script>
</head>

<body>
    <div class="container">
        <input type="text" v-model="msg"/>
        <br>
        <button @click="destory">销毁Vue实例</button>
        <br>
        <h3>{{ msg }}<h3/>
    </div>
</body>

</html>